{% extends "base.html" %}
{% load static staticfiles i18n %}
{% block content %}
{% if compound %}
    <!-- compound basic information -->
    <div id="compound-basic-info" class="panel panel-default">

            <div class="panel-heading h4"><strong>{{ compound.english_name }}'s basic information</strong></div>
            <div class="panel-body">
{#                <p><em>{{ compound.describe }}</em></p>#}
                <table class="table text-left">
                    <tbody>
                    <tr>
                        <th>Yatcm ID:</th>
                        <td>{{ compound.pk }}</td>
                    </tr>
                    <tr>
                        <th>English Name</th>
                        <td>
                            {{ compound.english_name }}&nbsp;

                        </td>
                    </tr>
                    <tr>
                        <th>Chinese Name</th>
                        <td> {{ compound.chinese_name }}&nbsp;</td>
                    </tr>
                    <tr>
                        <th>Synonyms</th>
                        <td>
                            {% for synonym in compound.englishidentity_set.all %}
                                [{{ synonym.identity }}]
                            {% endfor %}
                        </td>
                    </tr>
{#                    <tr>#}
{#                        <th>Useful Links</th>#}
{#                        <td>#}
{#                            {% for cid in compound.cid.all %}#}
{#                                <a href={{ cid.url }}>[{{ cid.cid }}]&nbsp;</a>#}
{#                            {% endfor %}#}
{#                            {% for cas in compound.cas.all %}#}
{#                                <a href={{ cas.url }}>[{{ cas.cas }}]&nbsp;</a>#}
{#                            {% endfor %}#}
{#                            {% for chembl in compound.chembl.all %}#}
{#                                <a href={{ chembl.url }}>[{{ chembl.chembl_id }}]&nbsp;</a>#}
{#                            {% endfor %}#}
{#                        </td>#}
{#                    </tr>#}
                    <tr>
                     <th>
                            CID
                        </th>
                        <td>
                            {% for cid in compound.cid.all %}
                                <a href={{ cid.url }}>{{ cid.cid }}&nbsp;</a>
                            {% endfor %}
                        </td>
                    </tr>
                    <tr>
                        <th>CAS</th>
                        <td>
                            {% for cas in compound.cas.all %}
                                <a href="http://www.molbase.com/en/cas-{{ cas.cas }}.html">{{ cas.cas }}&nbsp;</a>
                            {% endfor %}

                        </td>
                    </tr>
                    <tr>
                        <th>
                            Chembl ID
                        </th>
                        <td>
                            {% for chembl in compound.chembl.all %}
                                <a href={{ chembl.url }}>[{{ chembl.chembl_id }}]&nbsp;</a>
                            {% endfor %}
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>

    </div>

    <!-- compound structure information -->
    <div id="compound-structure" class="container">
        <h4><strong>Structure information</strong></h4>
            <div class="row">
                <div class="col-md-4">
                    {% if compound.mol_image %}
                        <img class="img-responsive" src="{{ compound.mol_image.url }}" alt="compound picture" style="height: 300px;">
                    {% else %}
                        Molecular structure is Not generated
                    {% endif %}
                </div>
                <div class="col-md-8">
                    <table class="table">
                        <tr><th>Smiles</th></tr>
                        <tr><td>{{ compound.smiles }}</td></tr>
                        <tr><th>Formula</th></tr>
                        <tr><td>{{ compound.formula }}</td></tr>
                        <tr><th>Mol weight</th></tr>
                        <tr><td>{{ compound.mol_weight }}</td></tr>
                        <tr><th>Calculate attributes</th></tr>
                        <tr>
                            <td>
                                Alogp:{{ compound.alogp }};
                                PSA:{{ compound.psa }};
                                HBA:{{ compound.hba }};
                                HBD:{{ compound.hbd }};
                                RTB:{{ compound.rtb }}
                            </td>
                        </tr>
                        <tr><th>Mol2 file</th></tr>
                        <tr><td><a href="{{ compound.mol_file.url }}">{{ compound.english_name }}</a></td></tr>
                    </table>
                </div>
            </div>

    </div>

    <!-- compound related herbs-->
    <div id="related_herbs">
    <h4>Related Herbs</h4>
    <table class="table table-responsive">
        <tr>
            <th style="width: 33%">Related Herbs</th>
            {# todo: change the href to compound related herbs list view #}
            <td><a href="{% url "compound_related_herbs" compound.pk %}">{{ compound.herb_set.count}} records</a></td>
        </tr>
    </table>
    </div>

    <!-- compound related compounds -->
    <div id="related_compounds">
    <h4>Related compounds</h4>
    <table class="table table-responsive">
        <tr>
            <th style="width: 33%">Related Compounds</th>
            <td >
                <a href="{% url "compound_related_compounds" compound.pk %}">
                    {{ compound.related_compounds.count }} records
                </a>
            </td>
        </tr>

    </table>
    </div>

    <!-- compound related pathways -->
{% endif %}
{% endblock %}